<div id="unsupported-browser-warning" class="warning-bar--item">
  <span title="<%= t('unsupported_browser.close_warning') %>" class="icon3 icon-warning warning-bar--disable-on-hover"></span>
  <p>
    <strong><%= t('unsupported_browser.title') %></strong>

    <%= t('unsupported_browser.message') %>

    <a href="https://www.openproject.org/open-source/download/systemrequirements/"
       target="_blank">
      <%= t('unsupported_browser.update_message') %>
    </a>
  </p>
</div>

<%= nonced_javascript_tag do %>
  (function() {
    // Hide initially
    var message = document.getElementById('unsupported-browser-warning');

    try {
      var hidden = window.localStorage.getItem('unsupported-browser-warning-ignore') === '1';
      if (hidden) {
        message.style.display = 'none';
      }
    } catch (e) {
      console.error('Failed to access your browsers local storage.');
    }

    // Click handler to hide
    var span = message.querySelector('.warning-bar--disable-on-hover');
    span.onclick = function() {
      message.style.display = 'none';
      try {
        window.localStorage.setItem('unsupported-browser-warning-ignore', '1');
      } catch (e) {
        console.error('Failed to access your browsers local storage.');
      }
    };
  })();
<% end %>
